import MFormItem from '../MFormItem';
import { Col, DatePicker, Input, InputNumber, Radio, Select } from 'antd';
import React from 'react';
import moment from 'moment';

const { Option } = Select;

export const FormItem4Input = props => {
  const { disabled = false, onPressEnter } = props;
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...props}>
        <Input
          disabled={disabled}
          autoComplete="off"
          placeholder={'请输入'}
          style={{ width: '100%' }}
          onPressEnter={e => {
            const input = e.target.value;
            if (onPressEnter) {
              onPressEnter(input);
            }
          }}
        ></Input>
      </MFormItem>
    </Col>
  );
};

export const FormItem4InputNumber = props => {
  const { min, max, disabled = false, ...other } = props;
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...other}>
        <InputNumber
          disabled={disabled}
          min={min}
          max={max}
          autoComplete="off"
          placeholder={'请输入'}
          style={{ width: '100%' }}
        ></InputNumber>
      </MFormItem>
    </Col>
  );
};

export const FormItem4DatePicker = props => {
  const { disabled = false } = props;
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...props}>
        <DatePicker style={{ width: '100%' }} disabled={disabled} />
      </MFormItem>
    </Col>
  );
};

export const FormItem4Select = props => {
  const { items, disabled = false, showCode = false, ...other } = props;

  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...other}>
        <Select
          disabled={disabled}
          allowClear={true}
          style={{ width: '100%' }}
          dropdownMatchSelectWidth={false}
        >
          {items
            ? items.map((item, index) => {
                return showCode ? (
                  <Option key={index} value={item.dictValue}>
                    {`(${item.dictValue})${item.dictName}`}
                  </Option>
                ) : (
                  <Option key={index} value={item.dictValue}>
                    {item.dictName}
                  </Option>
                );
              })
            : null}
        </Select>
      </MFormItem>
    </Col>
  );
};

export const FormItem4Radio = props => {
  const { items, disabled = false, ...other } = props;
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...other}>
        <Radio.Group disabled={disabled}>
          {items
            ? items.map((item, index) => {
                return (
                  <Radio key={index} value={item.dictValue}>
                    {item.dictName}
                  </Radio>
                );
              })
            : null}
        </Radio.Group>
      </MFormItem>
    </Col>
  );
};
